<template>
  <a-layout-header class="header">
    <div class="logo">
      <router-link to="/welcome">
      甲蛙12306控台
      </router-link>
    </div>
    <div style="float: right;color: white">
      <!--      您好，{{ member.mobile }}-->
      <!--      &nbsp;&nbsp;-->
      <!--      <router-link to="/login" style="color: white;">退出登录</router-link>-->
      欢迎使用管理控制台
    </div>
    <a-menu
        v-model:selectedKeys="selectedKeys"
        theme="dark"
        mode="horizontal"
        :style="{ lineHeight: '64px' }"
    >
      <a-menu-item key="/welcome">
        <router-link to="/welcome">
          <coffee-outlined/>&nbsp;欢迎
        </router-link>
      </a-menu-item>
      <a-menu-item key="/about">
        <router-link to="/about">
          <coffee-outlined/>&nbsp;关于
        </router-link>
      </a-menu-item>
    </a-menu>

  </a-layout-header>
</template>

<script>
// //vue2 写法
// export default {
//   name: 'HelloWorld',
//   props: {
//     msg: String
//   }
// }

import {defineComponent, ref, watch} from 'vue';
import router from "@/router";

export default defineComponent({
  name: "the-header-view",
  setup() {
    // let member = store.state.member;
    let selectedKeys = ref([]);
    watch(() => router.currentRoute.value.path, (newValue) => {
      console.log('watch', newValue);
      selectedKeys.value = [];
      selectedKeys.value.push(newValue);
    }, {immediate: true})
    return {
      // member,
      selectedKeys
    };
  },
});
</script>
<!--scoped 当前页面生效-->
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.logo {
  float: left;
  height: 31px;
  width: 150px;
  color: white;
  font-size: 20px;
}
</style>
